//top区域
let topBtn=document.querySelectorAll('.top .middle a')
topBtn.forEach(function(v,i){
    v.onclick=function(){
        topBtn.forEach(function(v2,i2){
            v2.className=''
        })

        v.className='topOn'
    }
})


// 锚点链接区域
let goTop = document.querySelectorAll('.goTop p');
let content = document.querySelectorAll('.main .location')
// console.log(content);

let timer;

goTop.forEach(function(v,i){
    v.onclick=function(){
        goTop.forEach(function(v2,i2){
            v2.classList.remove('on')
        })
            v.classList.add('on')
        
        clearInterval(timer);//清楚上一个定时器(防止定时器叠加)
        //当前高度：window.scrollY
        //目标高度：content[i].offsetTop

        //做判断向上/向下
        if(content[i].offsetTop < window.scrollY ){
            //向上滚动--减少高度
            timer = setInterval(() => {
                window.scrollTo(0,window.scrollY - 20)

                //每10毫秒减少20高度到指定位置

                //每次滚动之后做一次判断，什么时候停止
                if(content[i].offsetTop >= window.scrollY){
                    window.scrollTo(0,content[i].offsetTop);
                    clearInterval(timer);
                }
            }, 10);
        }else if(content[i].offsetTop > window.scrollY){
            //向下滚动--增加高度
            timer = setInterval(() => {
                window.scrollTo(0,window.scrollY + 20)
                //每10毫秒增加20高度到指定位置
                //每次滚动之后做一次判断，什么时候停止
                if(content[i].offsetTop <= window.scrollY){
                    window.scrollTo(0,content[i].offsetTop);
                    clearInterval(timer);
                }

            }, 10);
        };

    };        
})


window.onscroll = function(){
        goTop.forEach(function(v,i){
            if(content[i].offsetTop-340 <= window.scrollY){
                goTop.forEach(function(v2,i2){
                    v2.classList.remove('on');
                })
                v.classList.add('on')
            }else if(content[i].offsetTop+340 >= window.scrollY){
                v.classList.remove('on')
            };
       });
    };





